<rd-header>
  <rd-header-title title-text="创建容器组"></rd-header-title>
  <rd-header-content> <a ui-sref="docker.stacks">容器组</a> &gt; 获取容器组 </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="stack_name" class="col-sm-1 control-label text-left">名称</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" ng-model="formValues.Name" id="stack_name" placeholder="例如：mystack" auto-focus />
            </div>
          </div>
          <!-- !name-input -->
          <div class="form-group">
            <span class="col-sm-12 text-muted small" ng-if="state.StackType === 1">
              容器组将使用类似于 <code>docker stack deploy</code> 命令部署。
            </span>
            <div class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion == 2">
              <div style="margin-bottom: 7px;">
                容器组将使用类似于 <code>docker-compose</code> 命令部署. 当前仅支持版本为 <b>2</b> 的Compose文件。
              </div>
              <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
              注意：由于libcompose的限制，容器组的名称将被标准化，去掉所有特殊字符和大写字母。
            </div>
            <span class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion > 2">
              容器组将使用 <code>docker-compose</code> 部署.
            </span>
          </div>
          <!-- build-method -->
          <div class="col-sm-12 form-section-title">
            构建方法
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0;">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" />
                <label for="method_editor">
                  <div class="boxselector_header">
                    <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                    文本编辑器
                  </div>
                  <p>使用我们提供的文本编辑器</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" />
                <label for="method_upload">
                  <div class="boxselector_header">
                    <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
                    上传
                  </div>
                  <p>从您的电脑上传</p>
                </label>
              </div>
              <div hidden="true">
                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" />
                <label for="method_repository">
                  <div class="boxselector_header">
                    <i class="fab fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
                    仓库
                  </div>
                  <p>使用Git仓库</p>
                </label>
              </div>
              <div hidden="true">
                <input type="radio" id="method_template" ng-model="state.Method" value="template" />
                <label for="method_template">
                  <div class="boxselector_header">
                    <i class="fa fa-rocket" aria-hidden="true" style="margin-right: 2px;"></i>
                    自定义模板
                  </div>
                  <p>使用自定义模板</p>
                </label>
              </div>
            </div>
          </div>
          <!-- !build-method -->
          <!-- web-editor -->
          <div ng-show="state.Method === 'editor'">
            <div class="col-sm-12 form-section-title">
              文本编辑器
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                您可以在 <a href="https://docs.docker.com/compose/compose-file/" target="_blank">官方文档</a>获取更过有关Compose文件格式的信息。
              </span>
              <div class="col-sm-12" ng-if="state.editorYamlValidationError"
                ><span class="text-danger small">{{ state.editorYamlValidationError }}</span></div
              >
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <code-editor
                  identifier="stack-creation-editor"
                  placeholder="# Define or paste the content of your docker-compose file here"
                  yml="true"
                  on-change="(editorUpdate)"
                ></code-editor>
              </div>
            </div>
          </div>
          <!-- !web-editor -->
          <!-- upload -->
          <div ng-show="state.Method === 'upload'">
            <div class="col-sm-12 form-section-title">
              上传
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                您可以从您的电脑上传 Compose 文件
              </span>
              <div class="col-sm-12" ng-if="state.uploadYamlValidationError"
                ><span class="text-danger small">{{ state.uploadYamlValidationError }}</span></div
              >
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button type="button" class="btn btn-sm btn-primary" ngf-select="uploadFile($file)">选择文件</button>
                <span style="margin-left: 5px;">
                  {{ formValues.StackFile.name }}
                  <i class="fa fa-times red-icon" ng-if="!formValues.StackFile" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <!-- !upload -->
          <!-- repository -->
          <div ng-show="state.Method === 'repository'" hidden="true">
            <div class="col-sm-12 form-section-title">
              Git 仓库
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                您可以使用Git仓库的地址
              </span>
            </div>
            <div class="form-group">
              <label for="stack_repository_url" class="col-sm-2 control-label text-left">仓库地址</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  ng-model="formValues.RepositoryURL"
                  id="stack_repository_url"
                  placeholder="https://github.com/portainer/portainer-compose"
                />
              </div>
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                使用以下语法指定仓库的引用: 指定分支使用
                <code>refs/heads/branch_name</code> 或指定标签使用 <code>refs/tags/tag_name</code>. 如果不指定应用的仓库，我们将默认使用 <code>HEAD</code> 引用，通常是
                <code>master</code> 分支.
              </span>
            </div>
            <div class="form-group">
              <label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository reference</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="formValues.RepositoryReferenceName" id="stack_repository_reference_name" placeholder="refs/heads/master" />
              </div>
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                指定仓库中Compose文件的绝对路径。
              </span>
            </div>
            <div class="form-group">
              <label for="stack_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="formValues.ComposeFilePathInRepository" id="stack_repository_path" placeholder="docker-compose.yml" />
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  用户认证
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.RepositoryAuthentication" /><i></i> </label>
              </div>
            </div>
            <div class="form-group" ng-if="formValues.RepositoryAuthentication">
              <span class="col-sm-12 text-muted small">
                如果您的 git 帐户启用了两步验证，您可能会在创建模板时收到一个
                <code>需要验证</code>的错误。在这种情况下，您需要提供一个个人访问令牌来代替您的密码。
              </span>
            </div>
            <div class="form-group" ng-if="formValues.RepositoryAuthentication">
              <label for="repository_username" class="col-sm-1 control-label text-left">用户名</label>
              <div class="col-sm-11 col-md-5">
                <input type="text" class="form-control" ng-model="formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
              </div>
              <label for="repository_password" class="col-sm-1 control-label text-left">
                密码
              </label>
              <div class="col-sm-11 col-md-5">
                <input type="password" class="form-control" ng-model="formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
              </div>
            </div>
          </div>
          <!-- !repository -->
          <!-- custom-template -->
          <div ng-show="state.Method === 'template'" hidden="true">
            <div class="form-group">
              <label for="stack_template" class="col-sm-1 control-label text-left">
                模板
              </label>
              <div class="col-sm-11">
                <select
                  ng-if="templates.length"
                  class="form-control"
                  ng-model="selectedTemplate"
                  ng-options="template as template.label for template in templates"
                  ng-change="onChangeTemplate(selectedTemplate)"
                >
                  <option value="" label="Select a Custom template" disabled selected="selected"> </option>
                </select>
                <span ng-if="!templates.length">
                  没有可用的自定义模板。<a ui-sref="docker.templates.custom.new">前往创建</a>
                </span>
              </div>
            </div>
            <!-- description -->
            <div ng-if="selectedTemplate.note">
              <div class="col-sm-12 form-section-title">
                信息
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="template-note" ng-bind-html="selectedTemplate.note"></div>
                </div>
              </div>
            </div>
            <!-- !description -->
            <!-- editor -->
            <div ng-if="selectedTemplate && formValues.StackFileContent">
              <div class="col-sm-12 form-section-title">
                文本编辑器
              </div>
              <div class="form-group">
                <div class="col-sm-12" ng-if="state.editorYamlValidationError"
                  ><span class="text-danger small">{{ state.editorYamlValidationError }}</span></div
                >
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <code-editor
                    identifier="template-content-editor"
                    placeholder="# 在这里编写或者粘贴docker-compose文件中的内容"
                    yml="true"
                    value="formValues.StackFileContent"
                    on-change="(editorUpdate)"
                  ></code-editor>
                </div>
              </div>
            </div>
          </div>
          <!-- !custom-template -->
          <!-- environment-variables -->
          <div>
            <div class="col-sm-12 form-section-title">
              环境
            </div>
            <div class="form-group">
              <div class="col-sm-12" style="margin-top: 5px;">
                <label class="control-label text-left">环境变量</label>
                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
                  <i class="fa fa-plus-circle" aria-hidden="true"></i> 添加环境变量
                </span>
              </div>
              <!-- environment-variable-input-list -->
              <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                <div ng-repeat="variable in formValues.Env" style="margin-top: 2px;">
                  <div class="input-group col-sm-5 input-group-sm">
                    <span class="input-group-addon">名称</span>
                    <input type="text" class="form-control" ng-model="variable.name" placeholder="例如：FOO" />
                  </div>
                  <div class="input-group col-sm-5 input-group-sm">
                    <span class="input-group-addon">值</span>
                    <input type="text" class="form-control" ng-model="variable.value" placeholder="例如：bar" />
                  </div>
                  <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable($index)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                  </button>
                </div>
              </div>
              <!-- !environment-variable-input-list -->
            </div>
          </div>
          <!-- !environment-variables -->
          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
          <!-- actions -->
          <div class="col-sm-12 form-section-title">
            操作
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress
              || (state.Method === 'editor' && (!formValues.StackFileContent || state.editorYamlValidationError))
              || (state.Method === 'upload' && (!formValues.StackFile || state.uploadYamlValidationError))
              || (state.Method === 'template' && (!formValues.StackFileContent || !selectedTemplate || state.editorYamlValidationError))
              || (state.Method === 'repository' && ((!formValues.RepositoryURL || !formValues.ComposeFilePathInRepository) || (formValues.RepositoryAuthentication && (!formValues.RepositoryUsername || !formValues.RepositoryPassword))))
              || !formValues.Name"
                ng-click="deployStack()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress">部署容器组</span>
                <span ng-show="state.actionInProgress">容器组部署中...</span>
              </button>
              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
